<template>
  <section class="description">
    <SwiperBanner show-introduce="1" :zh-name="title" :en-name="english" :excerpt="excerpt" :slides="videos"/>
    <div class="des-introduce">
      <div class="introduce-inner">{{content}}</div>
    </div>
    <SwiperColumn title="相关短途体验"  :slides="experiences"/>
    <RouteList :title="title" :routes="routePosts" />
  </section>
</template>
<script>
import axios from 'axios'
import RouteList from '~/components/RouteList.vue'
import SwiperBanner from '~/components/SwiperBanner.vue'
import SwiperColumn from '~/components/SwiperColumn.vue'
export default {
  asyncData ({ params, error }) {
    return axios.get(`http://hurtigruten.cn/api/mag.destination.get.json?id=${params.id}`)
      .then((res) => {
        const destination = res.data.destination
        console.log('destination', destination)
        return {
          title: destination.title,
          content: destination.content,
          excerpt: destination.excerpt,
          english: destination.english,
          videos: destination.videos,
          experiences: destination.experience_posts,
          routePosts: destination.route_posts
        }
      })
      .catch((e) => {
        error({ statusCode: 404, message: 'Post not found' })
      })
  },
  head () {
    return {
      title: this.title,
      meta: [
        { hid: 'keywords', name: 'keywords', content: '海达路德游轮，海达路德极地游轮，极地探险，探险游轮，游轮旅游' },
        { hid: 'description', name: 'description', content: '海达路德经过125年的历史沉淀，成为全球游轮探险旅行领军者，与海达路德同行没有观光客，只有探险家。海达路德以打造亲身体验独一无二的海上航行为愿景，是海达路德的品牌精髓，这些都源自海达路德125年来历史悠久的遗传基因。' }
      ]
    }
  },
  components: {
    RouteList,
    SwiperBanner,
    SwiperColumn
  }
}
</script>
<style lang="less">
@import 'assets/css/destination.css';
</style>
